@charset "UTF-8";
@import "./_config.scss";
@import "~@scss/helpers/_functions.scss";
@import "~@scss/themes/index.scss";

/*
    生成 布局样式
    将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
 */

@mixin g($block) {
    $GRID: $--common-gridPrefix + "-" + $block !global;
    .#{$GRID} {
        @content;
    }
}

@mixin ge($element) {
    $currentSelector: $GRID + "__" + $element;
    .#{$currentSelector} {
        @content;
    }
}


/*
    生成 模块空间
    通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
 */

@mixin m($block) {
    $ROOT: $--common-modulePrefix + "-" + $block !global;
    .#{$ROOT} {
        @content;
    }
}

@mixin me($element) {
    $currentSelector: $ROOT + "__" + $element;
    .#{$currentSelector} {
        @content;
    }
}


/*
    生成一个组件
    通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
 */

@mixin c($block) {
    $ROOTCOMPONENT: $--common-componentPrefix + "-" + $block !global;
    $COMPONENT: $--common-componentPrefix + "-" + $block !global;
    $ROOT: $block !global;
    .#{$ROOTCOMPONENT} {
        @content;
    }
}

@mixin ce($element) {
    $currentSelector: $ROOTCOMPONENT + "-" + $element;
    $COMPONENT: $currentSelector !global;
    .#{$currentSelector} {
        @content;
    }
}

@mixin cee($element) {
    $currentSelector: $COMPONENT + "-" + $element;
    $COMPONENT: $currentSelector;
    .#{$currentSelector} {
        @content;
    }
}

@mixin cm($modifier) {
    $currentSelector: $ROOTCOMPONENT + "--" + $modifier;
    .#{$currentSelector} {
        @content;
    }
}

@mixin cd($element) {
    $currentSelector: $ROOT + "-" + $element;
    $CDCOMPONENT: $currentSelector !global;
    .#{$currentSelector} {
        @content;
    }
}

@mixin cde($element) {
    $currentSelector: $CDCOMPONENT + "-" + $element;
    // $CDCOMPONENT : $currentSelector !global;
    .#{$currentSelector} {
        @content;
    }
}

@mixin cdm($modifier) {
    $currentSelector: $CDCOMPONENT + "--" + $modifier;
    & .#{$currentSelector} {
        @content;
    }
}

@mixin cd_m($modifier) {
    $currentSelector: $CDCOMPONENT + "--" + $modifier;
    &.#{$currentSelector} {
        @content;
    }
}

// @mixin c($block) {
//     $COMPONENT: $--common-componentPrefix + "-" + $block !global;
//     .#{$COMPONENT} {
//         @content;
//     }
// }
// @mixin ce($block) {
//     $currentSelector: $COMPONENT + "__" + $block;
//     .#{$currentSelector} {
//         @content;
//     }
// }

/*
  生成某个组件的修饰符 是改变某个块的外观的标志
  @include m(primary)  => .el-button--primary{}
  #el-button{ @include m([primary,success])}   => #el-button--primary,#el-button--success{}
 */

@mixin componentState($state) {
    $selector: &;
    $currentSelector: "";
    @each $unit in $modifier {
        $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
    }
    @at-root {
        #{$currentSelector} {
            @content;
        }
    }
}


/*
  状态管理   
  @include when(disabled){}   =>   el-button.is-disabled{}
 */

@mixin when($state) {
    @at-root {
        &.#{$--common-statePrefix + $state} {
            @content;
        }
    }
}


/*
    生成一个功能样式
    为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
    @include func(clear)  =>  .f-clear  //清除浮动
 */

@mixin f($block) {
    $FUNCTION: $--common-functionPrefix + "-" + $block;
    $FUNCTION_BLOCK: $block !global;
    .#{$FUNCTION} {
        @content;
    }
}

@mixin fm($element) {
    $currentSelector: $FUNCTION_BLOCK + "-" + $element;
    &.#{$currentSelector} {
        @content;
    }
}


/*
    生成一个公共样式
    为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
    
 */

@mixin ui($block) {
    $UI: $--common-baseComponent + "-" + $block;
    $UI_BLOCK: $block !global;
    .#{$UI} {
        @content;
    }
}

@mixin uie($element) {
    $currentSelector: $UI_BLOCK + "-" + $element;
    &.#{$currentSelector} {
        @content;
    }
}



/* Break-points
 -------------------------- */

@mixin res($key, $map: $--breakpoints) {
    // 循环断点Map，如果存在则返回
    @if map-has-key($map, $key) {
        @media only screen and #{inspect(map-get($map, $key))} {
            @content;
        }
    }
    @else {
        @warn "Undefeined points: `#{$map}`";
    }
}


/* Scrollbar
 -------------------------- */

@mixin scroll-bar {
    $--scrollbar-thumb-background: #b4bccc;
    $--scrollbar-track-background: #fff;
    &::-webkit-scrollbar {
        z-index: 11;
        width: 6px;
        &:horizontal {
            height: 6px;
        }
        &-thumb {
            border-radius: 5px;
            width: 6px;
            background: $--scrollbar-thumb-background;
        }
        &-corner {
            background: $--scrollbar-track-background;
        }
        &-track {
            background: $--scrollbar-track-background;
            &-piece {
                background: $--scrollbar-track-background;
                width: 6px;
            }
        }
    }
}


/* Placeholder
 -------------------------- */

@mixin placeholder {
    &::-webkit-input-placeholder {
        @content
    }
    &::-moz-placeholder {
        @content
    }
    &:-ms-input-placeholder {
        @content
    }
};


@mixin b($block) {
    $B: $namespace+'-'+$block !global;
    .#{$B} {
        @content;
    }
}

@mixin e($element) {
    $E: $element !global;
    $selector: &;
    $currentSelector: "";
    @each $unit in $element {
        $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
    }
    @if hitAllSpecialNestRule($selector) {
        @at-root {
            #{$selector} {
                #{$currentSelector} {
                    @content;
                }
            }
        }
    }
    @else {
        @at-root {
            #{$currentSelector} {
                @content;
            }
        }
    }
}

@mixin m($modifier) {
    $selector: &;
    $currentSelector: "";
    @each $unit in $modifier {
        $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
    }
    @at-root {
        #{$currentSelector} {
            @content;
        }
    }
}

@mixin configurable-m($modifier, $E-flag: false) {
    $selector: &;
    $interpolation: '';
    @if $E-flag {
        $interpolation: $element-separator + $E-flag;
    }
    @at-root {
        #{$selector} {
            .#{$B+$interpolation+$modifier-separator+$modifier} {
                @content;
            }
        }
    }
}

@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
    $modifierCombo: '';
    @if $modifier {
        $modifierCombo: $modifier-separator + $modifier;
    }
    @at-root {
        #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
            @content
        }
    }
};

@mixin meb($modifier: false, $element: $E, $block: $B) {
    $selector: &;
    $modifierCombo: '';
    @if $modifier {
        $modifierCombo: $modifier-separator + $modifier;
    }
    @at-root {
        #{$selector} {
            .#{$block+$element-separator+$element+$modifierCombo} {
                @content
            }
        }
    }
};

// @mixin when($state) {
//     @at-root {
//         &.#{$state-prefix + $state} {
//             @content;
//         }
//     }
// }

@mixin extend-rule($name) {
    @extend #{'%shared-'+$name};
}

@mixin share-rule($name) {
    $rule-name: '%shared-'+$name;
    @at-root #{$rule-name} {
        @content
    }
}

@mixin pseudo($pseudo) {
    @at-root #{&}#{':#{$pseudo}'} {
 @content
}


}